<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i>
                    <router-link to="/contract">合同管理</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>合同收支</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <span
                    >当前合同 {{ contract.contractName }} 合同金额 ￥{{ contract.contractAmount }} 当前金额 ￥{{
                        contract.currentAmount
                    }}</span
                >
            </div>
            <div class="handle-box">
                <el-form v-if="isFilterAmount === true" v-model="query" label-width="100px">
                    <el-form-item label="最大金额">
                        <el-input-number size="medium" v-model="query.maxPayment" :precision="2" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="最小金额">
                        <el-input-number size="medium" v-model="query.minPayment" :precision="2" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-form>
                <el-input v-model="keyword" placeholder="收支名称、备注" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="getContractStatusData">搜索</el-button>
                <el-button type="primary" v-if="isFilterAmount === false" @click="isFilterAmount = true">筛选金额</el-button>
                <el-button type="primary" v-if="isFilterAmount === true" icon="el-icon-back" @click="handleClearFilterAmount"
                    >返回</el-button
                >
                <el-button type="primary" icon="el-icon-plus" @click="(addVisible = true), (form = defautForm)">添加</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="statusId" label="ID" width="100" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="statusName" label="收支名称"></el-table-column>
                <el-table-column prop="desc" label="备注说明"></el-table-column>
                <el-table-column label="收支金额">
                    <template slot-scope="scope">￥{{ scope.row.payment }}</template>
                </el-table-column>
                <el-table-column prop="operateTime" label="操作时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="(lineIndex = scope.$index), (form = scope.row), (editVisible = true)"
                            >编辑</el-button
                        >
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="pageParams.currentPage"
                    :page-size.sync="pageParams.pageSize"
                    :page-count="pageParams.totalElements"
                    :total="pageParams.totalElements"
                    @current-change="getContractData"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="添加" :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item prop="statusName" label="收支名称">
                    <el-input v-model="form.statusName"></el-input>
                </el-form-item>
                <el-form-item prop="payment" label="收支金额">
                    <el-input-number size="medium" v-model="form.payment" :precision="2" :step="1" :min="0"></el-input-number>
                    <span> 还差￥{{ contract.contractAmount - contract.currentAmount }}</span>
                </el-form-item>
                <el-form-item prop="desc" label="备注说明">
                    <el-input type="textarea" :rows="4" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item prop="operateTime" label="操作时间">
                    <el-date-picker v-model="form.operateTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item prop="statusName" label="收支名称">
                    <el-input disabled v-model="form.statusName"></el-input>
                </el-form-item>
                <el-form-item prop="payment" label="收支金额">
                    <el-input-number size="medium" v-model="form.payment" :precision="2" :step="1" :min="0"></el-input-number>
                    <span> 还差￥{{ contract.contractAmount - contract.currentAmount }}</span>
                </el-form-item>
                <el-form-item prop="desc" label="备注说明">
                    <el-input type="textarea" :rows="4" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item prop="operateTime" label="操作时间">
                    <el-date-picker disabled v-model="form.operateTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//import { fetchData } from '../../api/index';
import { dateToString, getFromDateAndTime } from '../../util/DateUtil.js';
import * as api from '@/api/index.js';
export default {
    name: 'contractStatus',
    data() {
        return {
            keyword: '',
            isFilterAmount: false,
            editVisible: false,
            addVisible: false,
            rules: [{}],
            query: {
                statusName: '',
                desc: '',
                maxPayment: '',
                minPayment: ''
            },
            pageParams: {
                currentPage: 1,
                pageSize: 10,
                totalElements: 20,
                totalPages: 1
            },
            rules: {
                statusName: [{ required: true, message: '请输入收支名称', trigger: 'blur' }],
                desc: [{ required: false, message: '请输入说明备注，可为空', trigger: 'blur' }],
                payment: [{ required: true, message: '请输入收支金额', trigger: ['blur', 'change'] }],
                operateTime: [{ required: true, message: '请选择操作时间', trigger: 'change' }]
            },
            form: {
                contractId: '',
                statusName: '',
                desc: '',
                payment: 0,
                operateTime: '',
                deleted: 0
            },
            defautForm: {},
            contract: {},
            lineData: {},
            tableData: [],
            multipleSelection: [],
            delList: [],
            pageTotal: 4,
            idx: -1,
            id: -1
        };
    },

    created() {
        this.getData();
    },
    watch: {
        $route(to, from) {
            if (this.$route.params.contractId) {
                this.getData();
            }
        }
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        handleAdd() {},
        handleClearFilterAmount() {
            this.isFilterAmount = false;
            this.query.maxPayment = '';
            this.query.minPayment = '';
            this.getContractStatusData();
        },
        // 删除操作
        handleDelete(index, row) {
            let contractId = this.$route.params.contractId;
            let statusId = row.statusId;
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then((_) => {
                    api.deleteContractStatusByStatusId(contractId, statusId)
                        .then((res) => {
                            if (res.code === 200) {
                                this.$message.success('删除成功');
                                this.getData();
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch((_) => {});
        },
        handleSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let contractId = this.$route.params.contractId;
                    this.form.operateTime = dateToString(this.form.operateTime);
                    let data = this.form;
                    api.saveContractStatus(contractId, data)
                        .then((res) => {
                            if (res.code === 200) {
                                this.$message.success(res.msg);
                                this.editVisible = false;
                                this.addVisible = false;
                                this.getData();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            });
        },
        getData() {
            this.getContractStatusData();
            this.getContractData();
            this.defautForm = this.form;
        },
        getContractStatusData() {
            let contractId = this.$route.params.contractId;
            let currentPage = this.pageParams.currentPage;
            let pageSize = this.pageParams.pageSize;
            this.query.statusName = this.keyword;
            this.query.desc = this.keyword;
            if (!this.isFilterAmount) {
                this.query.maxPayment = '';
                this.query.minPayment = '';
            }
            let data = this.query;
            api.getStatusPageByContractId(contractId, currentPage, pageSize, data)
                .then((res) => {
                    if (res.code === 200) {
                        this.tableData = res.data.content;
                        this.pageParams.currentPage = res.data.currentPage;
                        this.pageParams.pageSize = res.data.pageSize;
                        this.pageParams.totalElements = res.data.totalElements;
                        this.pageParams.totalPages = res.data.totalPages;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getContractData() {
            let contractId = this.$route.params.contractId;
            api.getContractById(contractId)
                .then((res) => {
                    if (res.code === 200) {
                        this.contract = res.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        }       
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
